<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<title>评价</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/evaluation.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="background: #f3f3f3;">
		<div class="wrapper">
			<div class="eval-title">
				<div class="label">满意度：</div>
				<div class="star-wrap">
					<i class="star"></i>
					<i class="star"></i>
					<i class="star"></i>
					<i class="star"></i>
					<i class="star"></i>
				</div>
				<!--<div class="status">非常好</div>-->
			</div>
			<div class="txt-wrap">
				<textarea name="" placeholder="请留下您的宝贵意见！说说您的使用心得..."></textarea>
				<div class="add-picture">
					<div class="add-btn"><input type="file" /></div>
					<div class="add-column"><img src="https://img.thgo8.com/assets/images/09/12/98be313b087b2bd4fd3ad34beb830121fbc2b464.jpg" alt="" /></div>
				</div>
			</div>
			<div class="incognito">
				<div class="left-cont">
					<div class="check-wrap">
						<input type="checkbox" id="incognito"/>
						<div></div>
					</div>
					<label for="incognito">匿名</label>
				</div>
				<div class="right-cont">您写的评价会以匿名形式展示</div>
			</div>
			<div class="experience">
				<div class="exp-head"><i></i><span>客户体验</span></div>
				<div class="evaluation">
					<div class="eval-list">
						<div class="label">服务态度</div>
						<div class="star-wrap">
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
						</div>
					</div>
					<div class="eval-list">
						<div class="label">环境卫生</div>
						<div class="star-wrap">
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
						</div>
					</div>
					<div class="eval-list">
						<div class="label">便捷安全</div>
						<div class="star-wrap">
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
							<i class="star"></i>
						</div>
					</div>
				</div>
			</div>
			<a href="javascript:void(0);" class="confirm-btn">提交</a>
			
			<!--评论成功弹窗-start-->
			<div class="ups-cont">
				<div class="mask"></div>
				<div class="ups-main">
					<div class="ups-title">评论成功</div>
					<div class="text">谢谢您的用心评价，祝你生活愉快！</div>
					<a href="javascript:history.go(-1);" class="returns">返回</a>
				</div>
			</div>
			<!--评论成功弹窗-end-->
		</div>
		
		<script type="text/javascript">
			//评价星数
			$('.star').click(function(){
				$(this).nextAll('.star').removeClass('cur');
				$(this).addClass('cur').prevAll('.star').addClass('cur');
			});
			
			//评论成功
			$('.confirm-btn').click(function(){
				$('.mask').fadeIn();
				$('.ups-main').css('animation','Scale 500ms linear normal both');

			})
		
		</script>
	</body>
</html>
